<!-- ERP 产品库存列表 -->
<template>

	<ContentWrap>
		<div class="header">
			<div>复制产品调拨单</div>
			<div>
				<el-button @click="saveClose">取消</el-button>
				<el-button type="primary" plain>打印</el-button>
			</div>
		</div>
	</ContentWrap>

	<ContentWrap>
		<!-- 搜索工作栏 -->
		<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
			<el-form-item label="调拨单号" prop="kuwei">
				<el-input v-model="input"  disabled  />
			</el-form-item>
			<el-form-item label="调出部门" prop="bianhao">
        <el-input v-model="input"  disabled  />
			</el-form-item>
			<el-form-item label="调入部门" prop="feilei">
				<el-input v-model="input" disabled  />
			</el-form-item>
			<el-form-item label="制单人" prop="cangku">
				<el-input v-model="input"  disabled  />
			</el-form-item>
			<el-form-item label="制单日期" prop="cangku">
        <el-input v-model="input"  disabled  />
			</el-form-item>
			<el-form-item label="备注" prop="kuwei">
        <el-input v-model="input"  disabled  />
			</el-form-item>
			<el-form-item label="附件" prop="kuwei">
				11111
			</el-form-item>

		</el-form>
	</ContentWrap>

	<!-- 列表 -->
	<ContentWrap>
		<div class="lie">
		
			<el-button @click="btnLie" type="success">列表字段</el-button>

		</div>
		<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">

			<el-table-column label="调出仓库" align="center" v-if="visibleColumns.bianhao" prop="bianhao" width="120"/>

			<el-table-column label="调出库位" align="center" v-if="visibleColumns.name" prop="name" />
			<el-table-column
label="调入仓库" align="center" v-if="visibleColumns.count" prop="count"
				:formatter="erpCountTableColumnFormatter" />
			<el-table-column label="调入仓位" v-if="visibleColumns.feilei" align="center" prop="feilei" />
			<el-table-column label="调出仓可用库存" v-if="visibleColumns.shuxing" align="center" prop="shuxing" />
			<el-table-column label="调入仓可用库存" v-if="visibleColumns.beizhu" align="center" prop="beizhu" />
			<el-table-column label="批号" v-if="visibleColumns.zhuangtai" align="center" prop="zhuangtai" />
			<el-table-column label="可调用数量" v-if="visibleColumns.danwei" align="center" prop="danwei" />
			<el-table-column label="序列号" align="center" v-if="visibleColumns.beizhu2" prop="beizhu" />
			<el-table-column label="基本数量" align="center" v-if="visibleColumns.danwei2" prop="danwei2" />
			<el-table-column label="辅助单位" align="center" v-if="visibleColumns.danwei3" prop="danwei3" />
			<el-table-column label="辅助数量" align="center" v-if="visibleColumns.danwei4" prop="danwei4" />
			<el-table-column label="辅助单位成本" align="center" v-if="visibleColumns.danwei5" prop="danwei5" />
			<el-table-column label="入库成本" align="center" v-if="visibleColumns.danwei6" prop="danwei6" />
			<el-table-column label="调拨备注" align="center" v-if="visibleColumns.danwei7" prop="danwei7" />
			<el-table-column label="产品编码" align="center" v-if="visibleColumns.danwei8" prop="danwei8" />
			<el-table-column label="产品图" align="center" v-if="visibleColumns.danwei9" prop="danwei9" />
			<el-table-column label="产品名称" align="center" v-if="visibleColumns.danwei10" prop="danwei10" />
		
		</el-table>
		<!-- 分页 -->
		<Pagination
:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
			@pagination="getList" />
	</ContentWrap>

	<!-- 自定义字段 -->
	<el-dialog v-model="dialogVisible" title="自定义字段" width="50%" :before-close="handleClose">
		<div class="content">

			<div class="content-list"><el-checkbox v-model="tempVisibleColumns.bianhao" label="产品编号" size="large" />
			</div>
			<div class="content-list"><el-checkbox v-model="tempVisibleColumns.name" label="产品名称" size="large" /></div>
			<div class="content-list"><el-checkbox v-model="tempVisibleColumns.count" label="产品分类" size="large" /></div>
			<div class="content-list"><el-checkbox v-model="tempVisibleColumns.feilei" label="产品规格" size="large" />
			</div>
			<div class="content-list"><el-checkbox v-model="tempVisibleColumns.shuxing" label="产品属性" size="large" />
			</div>
			<div class="content-list"><el-checkbox v-model="tempVisibleColumns.beizhu" label="产品备注" size="large" />
			</div>
			<div class="content-list"><el-checkbox v-model="tempVisibleColumns.zhuangtai" label="产品使用状态" size="large" />
			</div>
			<div class="content-list"><el-checkbox v-model="tempVisibleColumns.danwei" label="单位(基本单位)" size="large" />
			</div>
			<div class="content-list"><el-checkbox v-model="tempVisibleColumns.beizhu2" label="入库备注" size="large" />
			</div>
			<div class="content-list"><el-checkbox
v-model="tempVisibleColumns.danwei2" label="销售单价(基本单位)"
					size="large" /></div>
			<div class="content-list"><el-checkbox
v-model="tempVisibleColumns.danwei3" label="成本单价(基本单位)"
					size="large" /></div>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleCancel">取消</el-button>
				<el-button type="primary" @click="handleConfirm">
					确定
				</el-button>
			</span>
		</template>
	</el-dialog>
	<!-- 调出仓库的弹框 -->
	<el-dialog v-model="outShow" title="选择仓库" width="70%" >
		<div class="out-tab">
			<div class="out-header">
				<div> <el-input v-model="input" placeholder="请输入仓库编号/名字" /></div>
				<div><el-button type="primary">搜索</el-button></div>
			</div>
			<div class="tabs">
				<el-table
class="hide-header-select" ref="singleTableRef" :data="tableData" stripe style="width: 100%"
					row-key="id" @select="handleSelect" :header-cell-class-name="headerCellClassName"
					 @row-click="handleRowClick"
					>

					<el-table-column width="50" align="center">
        <template #default="{ row }">
          <el-radio 
					:model-value="currentRowId"
				:label="row.id"
				@click.stop="handleRadioClick(row)"

          />
        </template>
      </el-table-column>
					<!-- 仓库信息列 -->
					<el-table-column prop="date" label="仓库名称" />
					<el-table-column prop="name" label="仓库编号" />
					<el-table-column prop="pihao" label="批号" />
					<el-table-column prop="kuqu" label="库区" />
					<el-table-column prop="kuwei" label="库位" />
					<el-table-column prop="kucun2" label="当前库存" />
					<el-table-column prop="kucun3" label="占用库存" />
					<el-table-column prop="kucun4" label="可用库存" />
					<el-table-column prop="kucun5" label="基本单位" />
				</el-table>

				<div v-if="getSelectedRow()" class="selection-info">
					当前选中：<strong>{{ getSelectedRow().date }}</strong> (编号：{{ getSelectedRow().name }})
				</div>

			</div>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="outShow = false">取消</el-button>
				<el-button type="primary" @click="outShow = false">
					保存
				</el-button>
			</span>
		</template>
	</el-dialog>
	<!-- 调出库位 -->
	<el-dialog v-model="outShow2" title="选择库位" width="70%" >
		<div class="out-tab">
			<div class="out-header">
				<div> <el-input v-model="input" placeholder="请输入仓库编号/名字" /></div>
				<div><el-button type="primary">搜索</el-button></div>
			</div>
			<div class="tabs">
				<el-table
class="hide-header-select" ref="singleTableRef" :data="tableData" stripe style="width: 100%"
					row-key="id" @select="handleSelect" :header-cell-class-name="headerCellClassName"
					 @row-click="handleRowClick"
					>

					    <el-table-column width="55">
					      <template #default="{ row }">
					        <el-checkbox
:checked="selectedRowId === row.id" 
							@click.stop="handleCheckboxClick(row)" />
					      </template>
					    </el-table-column>
					<!-- 仓库信息列 -->
					<el-table-column prop="date" label="库位编号" />
					<el-table-column prop="name" label="库位名称" />
					
				</el-table>
	
				
	
			</div>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="outShow2 = false">取消</el-button>
				<el-button type="primary" @click="outShow2 = false">
					保存
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { defineEmits } from 'vue';
	import download from '@/utils/download'
	import { StockApi, StockVO } from '@/api/erp/stock/stock'
	import { ProductApi, ProductVO } from '@/api/erp/product/product'
	import { WarehouseApi, WarehouseVO } from '@/api/erp/stock/warehouse'
	import { erpCountTableColumnFormatter } from '@/utils'
	const outShow = ref(false)

	/** ERP 产品库存列表 */
	defineOptions({ name: 'ErpStock' })
	const input = ref("")
	const dialogVisible = ref(false)
	const message = useMessage() // 消息弹窗
	const { t } = useI18n() // 国际化
	const currentRowId = ref(null)  // 当前选中的仓库ID
	const loading = ref(false) // 列表的加载中
	const visibleColumns = ref({
		image: true,
		bianhao: true,
		name: true,
		count: true,
		feilei: true,
		shuxing: true,
		beizhu: true,
		zhuangtai: true,
		danwei: true,
		beizhu2: true,
		danwei2: true,
		danwei3: true,
		danwei4: true,
		danwei5: true,
		danwei6: true,
		danwei7: true,
		danwei8: true,
		danwei9: true,
		danwei10: true
	})
	const tableData = [
		{
			id: '1',
			date: '2016-05-03',
			name: 'Tom',
			pihao: '1212',
			kuqu: '1112',
			kuwei: '122',
			kucun2: '32323',
			kucun3: "6767",
			kucun4: '23222',
			kucun5: '5656'
		},
		{
			id: '2',
			date: '2016-05-03',
			name: 'Tom',
			pihao: '1212',
			kuqu: '1112',
			kuwei: '122',
			kucun2: '32323',
			kucun3: "6767",
			kucun4: '23222',
			kucun5: '5656'
		},


	]
	const list = ref<StockVO[]>([
		{
			name: '产品1',
			bianhao: '121212-dfdf',
			feilei: 'A类',
			shuxing: '121212',
			beizhu: 'ddfdf',
			zhuangtai: '已使用',
			danwei: 'mk',
			cangku: 'A-仓库',
			kuqu: 'a-12区',
			kuwei: 'A-12',
			kucun: '12',
			count: '111',
			danwei2: 'kg',
			danwei3: 'mc',
			beizhu2: "fdfd"
		}
	])
	const singleTableRef = ref<InstanceType<typeof ElTable>>()
	const currentRow = ref<any>(null)
	const handleSelect = (selection, row) => {
		// 如果当前行被选中，则清除其他所有行的选中状态
	if (selectedRowId.value !== row.id) {
	    selectedRowId.value = row.id;
	  }

	}
//取消返回
const emit = defineEmits(['customEvent'])
const saveClose = () => {
  // 触发事件并传递选中数据
  emit('closeDetail');
};

//调出仓库单选
const handleRadioClick = (row) => {
  currentRowId.value = currentRowId.value === row.id ? null : row.id;
};

	// 用于临时存储弹框中的选项
	const tempVisibleColumns = ref({ ...visibleColumns.value })
	// 打开弹框时初始化临时数据
	const btnLie = () => {
		tempVisibleColumns.value = { ...visibleColumns.value }
		dialogVisible.value = true
	}
	// 确认选择
	const handleConfirm = () => {
		visibleColumns.value = { ...tempVisibleColumns.value }
		dialogVisible.value = false

		// 这里可以添加保存到本地存储的逻辑
		// localStorage.setItem('visibleColumns', JSON.stringify(visibleColumns.value))
	}
	// 取消选择
	const handleCancel = () => {
		dialogVisible.value = false
	}
	//调出
	function getOut() {
		outShow.value = true
		console.log('111')
	}

	// 当前选中的行ID
	const selectedRowId = ref(null);
	// 处理行点击事件
	const handleRowClick = (row) => {

		 handleCheckboxClick(row); 
	};

	const getSelectedRow = () => {
		if (!selectedRowId.value) return null;

		return (tableData.value || []).find(
		
			item => item?.id === selectedRowId.value
		);
	};
// 处理复选框点击
    const handleCheckboxClick = (row) => {
		
      selectedRowId.value = selectedRowId.value === row.id ? null : row.id;
	  console.log('这个是啥',selectedRowId.value)
    };







	// 列表的数据
	const total = ref(0) // 列表的总页数
	const queryParams = reactive({
		pageNo: 1,
		pageSize: 10,
		productId: undefined,
		warehouseId: undefined
	})

	const queryFormRef = ref() // 搜索的表单
	const exportLoading = ref(false) // 导出的加载中
	const productList = ref<ProductVO[]>([]) // 产品列表
	const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表

	//点击列表字段
	// function btnLie(){
	//   dialogVisible.value=true
	// }
	/** 查询列表 */
	const getList = async () => {
		loading.value = true
		try {
			const data = await StockApi.getStockPage(queryParams)
			list.value = data.list
			total.value = data.total
		} finally {
			loading.value = false
		}
	}

	/** 搜索按钮操作 */
	const handleQuery = () => {
		queryParams.pageNo = 1
		getList()
	}

	/** 重置按钮操作 */
	const resetQuery = () => {
		queryFormRef.value.resetFields()
		handleQuery()
	}

	/** 添加/修改操作 */
	const formRef = ref()
	const openForm = (type : string, id ?: number) => {
		formRef.value.open(type, id)
	}

	/** 删除按钮操作 */
	const handleDelete = async (id : number) => {
		try {
			// 删除的二次确认
			await message.delConfirm()
			// 发起删除
			await StockApi.deleteStock(id)
			message.success(t('common.delSuccess'))
			// 刷新列表
			await getList()
		} catch { }
	}

	/** 导出按钮操作 */
	const handleExport = async () => {
		try {
			// 导出的二次确认
			await message.exportConfirm()
			// 发起导出
			exportLoading.value = true
			const data = await StockApi.exportStock(queryParams)
			download.excel(data, '产品库存.xls')
		} catch {
		} finally {
			exportLoading.value = false
		}
	}

	/** 初始化 **/
	onMounted(async () => {
		//await getList()
		// 加载产品、仓库列表
		productList.value = await ProductApi.getProductSimpleList()
		warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
	})


	// 返回一个空白表头渲染函数
	const noHeaderSelectRender = ({ column } : any) => {
		return h('div', { style: 'display: none' }, column.label)
	}

	// 为选择列的表头添加特定类名
	const headerCellClassName = ({ column, rowIndex } : any) => {
		if (column.type === 'selection') {
			return 'hidden-header-cell'
		}
		return ''
	}
</script>

<style scope>
	/* 隐藏选择列的表头 */
	:deep(.el-table__header-wrapper th.hidden-header-cell > .cell) {
		display: none !important;
	}



	.header {
		display: flex;
		justify-content: space-between;
	}

	.lie {
		display: flex;
		justify-content: end;
		padding: 10px
	}

	.out-tab {}

	.out-header {
		display: flex;
		justify-content: space-between;
	}

	.tabs {
		margin-top: 12px
	}

	<style scoped>

	/* 当前选中行的样式 */
	:deep(tr.selected-row) {
		background-color: #ecf5ff;
	}

	:deep(tr.selected-row:hover) {
		background-color: #d8ecff;
	}
</style>